
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>工厂湿度监控页面</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1000px;height:400px;"></div>
<script type="text/javascript">
    $(document).ready(function() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        //数据加载完之前先显示一段简单的loading动画
        myChart.showLoading();

        var times = [];    //横坐标数组（实际用来盛放X轴坐标值）
        var shidus = [];    //纵坐标数组（实际用来盛放Y坐标值）

        $.ajax({
            type: "get",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "http://127.0.0.1:8081/getShidu",    //请求发送到dataActiont处
            data: {},
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result) {
                    for (var i = 0; i < result.length; i++) {
                        times.push(result[i].time);
                        shidus.push(result[i].shidu);
                    }
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({//加载数据图表

                        title: {
                            text: '工厂相对湿度监控',
                            left: 'center'
                        },
                        tooltip: {},
                        xAxis: {
                            name: '时间',
                            data: times
                        },
                        yAxis: {
                            name: '相对湿度',
                        },
                        series: [{
                            type: 'bar',
                            data: shidus
                        }]
                    });
                }
            },

        });//end ajax
    });

</script>
</body>
</html>
